<script lang="ts" setup>
import { computed, onMounted, reactive, ref, UnwrapRef } from "vue";
import {
  DeleteOutlined,
  SearchOutlined,
  UserOutlined,
  IdcardOutlined
} from "@ant-design/icons-vue";
import {
  deleteUserUsingPost,
  listUserVoByPageUsingPost
} from "@/api/userController";
import { message } from "ant-design-vue";

interface FormState {
  layout: 'horizontal' | 'vertical' | 'inline';
  fieldA: string;
  fieldB: string;
}

const formState: UnwrapRef<FormState> = reactive({
  layout: 'horizontal',
  fieldA: '',
  fieldB: '',
});

// 表格数据相关
const dataList = ref<API.UserVO[]>([]);
const total = ref<number>(0);
const loading = ref(false);

// 搜索条件
const searchParams = reactive<API.UserQueryRequest>({
  pageSize: 10,
  current: 1,
  userAccount: '',
  userName: ''
});

// 表格列配置
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
    sorter: true
  },
  {
    title: '账号',
    dataIndex: 'userAccount',
    width: 150
  },
  {
    title: '用户名',
    dataIndex: 'userName',
    width: 150
  },
  {
    title: '头像',
    dataIndex: 'userAvatar',
    width: 100
  },
  {
    title: '简介',
    dataIndex: 'userProfile',
    ellipsis: true
  },
  {
    title: '角色',
    dataIndex: 'userRole',
    width: 120
  },
  {
    title: '操作',
    key: 'action',
    width: 100,
    fixed: 'right'
  }
];

// 获取数据
const getData = async () => {
  try {
    loading.value = true;
    const res = await listUserVoByPageUsingPost(searchParams);
    if (res.data.code === 0 && res.data.data) {
      dataList.value = res.data.data.records ?? [];
      total.value = res.data.data.total ?? 0;
    } else {
      message.error('数据获取失败：' + res.data.message);
    }
  } catch (e) {
    message.error('请求异常');
  } finally {
    loading.value = false;
  }
};

// 分页配置
const pagination = computed(() => ({
  current: searchParams.current,
  pageSize: searchParams.pageSize,
  total: total.value,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  pageSizeOptions: ['10', '20', '50', '100']
}));

// 表格变化处理
const doTableChange = (page: any, filters: any, sorter: any) => {
  searchParams.current = page.current;
  searchParams.pageSize = page.pageSize;
  if (sorter.field) {
    searchParams.sortField = sorter.field;
    searchParams.sortOrder = sorter.order === 'ascend' ? 'asc' : 'desc';
  }
  getData();
};

// 搜索处理
const doSearch = () => {
  searchParams.current = 1;
  getData();
};

// 删除用户
const doDel = async (id: number) => {
  try {
    const res = await deleteUserUsingPost({ id });
    if (res.data.code === 0) {
      message.success('删除成功');
      await getData();
    } else {
      message.error('删除失败：' + res.data.message);
    }
  } catch (e) {
    message.error('删除操作异常');
  }
};

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="user-management-container">
    <!-- 搜索区域 -->
    <div class="search-card">
      <a-form layout="inline" @finish="doSearch">
        <a-form-item label="账号">
          <a-input
              v-model:value="searchParams.userAccount"
              placeholder="请输入账号"
              allow-clear
              class="search-input"
          >
            <template #prefix>
              <UserOutlined class="input-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item label="用户名">
          <a-input
              v-model:value="searchParams.userName"
              placeholder="请输入用户名"
              allow-clear
              class="search-input"
          >
            <template #prefix>
              <IdcardOutlined class="input-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-button
              type="primary"
              html-type="submit"
              class="search-btn"
          >
            <SearchOutlined />
            搜索
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <!-- 数据表格 -->
    <div class="data-table-card">
      <a-table
          :columns="columns"
          :data-source="dataList"
          :pagination="pagination"
          :loading="loading"
          :scroll="{ x: 1200 }"
          @change="doTableChange"
          bordered
      >
        <!-- 头像列 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'userAvatar'">
            <a-avatar
                :src="record.userAvatar"
                :size="40"
                class="user-avatar"
            />
          </template>

          <!-- 角色列 -->
          <template v-else-if="column.dataIndex === 'userRole'">
            <a-tag
                :color="record.userRole === 'admin' ? 'volcano' : 'geekblue'"
                class="role-tag"
            >
              {{ record.userRole === 'admin' ? '管理员' : '普通用户' }}
            </a-tag>
          </template>

          <!-- 操作列 -->
          <template v-else-if="column.key === 'action'">
            <a-popconfirm
                title="确定要删除该用户吗？"
                @confirm="doDel(record.id)"
                ok-text="确定"
                cancel-text="取消"
            >
              <a-button
                  type="link"
                  danger
                  class="action-btn"
              >
                <DeleteOutlined />
                删除
              </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style scoped lang="less">
@import url('@/assets/var.less');

.user-management-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}

.search-card {
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 24px;
  transition: box-shadow 0.3s;

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}

.search-input {
  width: 240px;
  border-radius: 8px;
  transition: all 0.3s;

  &:hover {
    border-color: @primary-color;
  }

  &:focus {
    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
  }
}

.input-icon {
  color: fade(#000, 25%);
}

.search-btn {
  border-radius: 8px;
  padding: 0 20px;
  height: 40px;
  font-weight: 500;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px fade(@primary-color, 30%);
  }
}

.data-table-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  :deep(.ant-table-thead > tr > th) {
    background: linear-gradient(145deg, @primary-color, @secondary-color);
    color: #fff;
    font-weight: 600;
    border-bottom: none;
  }

  :deep(.ant-table-tbody > tr) {
    transition: all 0.3s;

    &:hover {
      background: fade(@primary-color, 3%) !important;
      transform: scale(1.02);
    }

    &:nth-child(even) {
      background: #fafafa;
    }
  }

  :deep(.ant-table-cell) {
    padding: 16px 24px !important;
  }
}

.user-avatar {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s;

  &:hover {
    transform: scale(1.1);
  }
}

.role-tag {
  border-radius: 4px;
  font-weight: 500;
}

.action-btn {
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.3s;

  &:hover {
    background: fade(@error-color, 10%);
    transform: translateX(2px);
  }
}

@media (max-width: 768px) {
  .search-card {
    padding: 16px;
  }

  .search-input {
    width: 100%;
  }

  .data-table-card {
    border-radius: 8px;
  }
}
</style>
